@font-face {
  font-family: 'Share Tech';
  font-style: normal;
  font-weight: 400;
  src: local('Share Tech'), local('ShareTech-Regular'), url(sharetech.ttf) format('truetype');
}

*{
  margin:0;
  padding:0;
}

html, body{
  width:100%;
  height:100%;
}

body{
  font-family:'georgia', serif;
  text-rendering: optimizeLegibility;
}

.button{
  border:1px solid #aaa;
  background:#eee;
  background:-webkit-linear-gradient(#fff, #eee);
  background:-moz-linear-gradient(#fff, #eee);
  background:-ms-linear-gradient(#fff, #eee);
  background:-o-linear-gradient(#fff, #eee);
  background:linear-gradient(#fff, #eee);
  text-align:center;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  border-radius:2px;
  display:inline-block;
  padding:12px 54px;
  font-size:20px;
  font-weight:bold;
  text-decoration: none;
  color:#222;
}

.button:active{
  -webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -ms-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -o-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
}

#wrap{
  overflow:hidden;
  width:100%;
  height:100%;
  position:relative;
  background:#fff;
}

#cart{
  position:fixed;
  background:#fff;
  top:0;
  left:0;
  width:100%;
  border-bottom:1px solid #aaa;
  z-index:10;
  -webkit-box-shadow:0 0 8px rgba(0,0,0,0.15);
  -moz-box-shadow:0 0 8px rgba(0,0,0,0.15);
  -ms-box-shadow:0 0 8px rgba(0,0,0,0.15);
  -o-box-shadow:0 0 8px rgba(0,0,0,0.15);
  box-shadow:0 0 8px rgba(0,0,0,0.15);
}

#cart .counter{
  font-size:14px;
  color:#999;
  display:block;
  text-align:center;
  float:right;
}

.help{
  text-decoration: none;
  color:#fff;
  margin:6px 30px;
  display:block;
  padding:10px 15px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  border-radius:2px;
  font-weight:bold;
}

.counter .placeholder{
  padding:15px 10px 15px 6px;
  display:block;
}

#cart h1{
  font-family:'Share Tech', sans-serif;
  font-size:23px;
  letter-spacing:-2px;
  border-right:1px solid #ddd;
  display:inline-block;
  background:#fff;
  float:left;
  font-weight:regular;
}

#cart h1 a{
  display:block;
  padding:10px 18px;
  text-decoration: none;
  color:#222;
}

#content{
  position:relative;
  z-index:1;
  height:100%;
  overflow-y:auto;
  background:#fff url(images/linedpaper.png) left top repeat;
}

#controls{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff url(images/gray_jean.png) left top repeat;
  border-top:1px solid #aaa;
  z-index:8;
  padding:10px 0;
  text-align:center;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.25);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.25);
  -ms-box-shadow:0 0 3px rgba(0,0,0,0.25);
  -o-box-shadow:0 0 3px rgba(0,0,0,0.25);
  box-shadow:0 0 3px rgba(0,0,0,0.25);
  font-family:'Share Tech', sans-serif;
}

#controls .button{
  margin:0 5px;
  font-weight:bold;
  font-size:26px;
  width:36px;
}

#questions {
}

#actions {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  z-index:7;
  line-height:26px;
  background:#fff;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  -moz-overflow-scrolling: touch;
  -ms-overflow-scrolling: touch;
  -o-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

#actions a{
  color:#536829;
}

#actions a:active{
  -webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -moz-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -ms-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  -o-box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
  box-shadow:inset 0 2px 3px rgba(0,0,0,0.5);
}

#actions ol{
  margin:65px 15px 15px 39px;
  font-weight:bold;
}

.bookmark {
  margin-left: 18px;
  margin-bottom: 65px;
}

.bookmark span{
  background:#83a342;
  background:-webkit-linear-gradient(#9ac138, #83a342);
  background:-moz-linear-gradient(#9ac138, #83a342);
  background:-ms-linear-gradient(#9ac138, #83a342);
  background:-o-linear-gradient(#9ac138, #83a342);
  background:linear-gradient(#9ac138, #83a342);
  color:#fff;
  border:1px solid #5d742c;
  text-shadow:0 1px 1px #000;
  text-decoration: none;
  padding:1px 3px;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -ms-border-radius:2px;
  -o-border-radius:2px;
  border-radius:2px;
}

#actions li{
  margin-bottom:15px;
  font-weight:normal;

}

.no-button {
  background:#c85230;
  background:-webkit-linear-gradient(#f56534, #c85230);
  background:-moz-linear-gradient(#f56534, #c85230);
  background:-ms-linear-gradient(#f56534, #c85230);
  background:-o-linear-gradient(#f56534, #c85230);
  background:linear-gradient(#f56534, #c85230);
  border:1px solid #8f361f;
  text-shadow:0 1px 1px #000;
  color:#fff;
}

.yes-button {
  background:#83a342;
  background:-webkit-linear-gradient(#9ac138, #83a342);
  background:-moz-linear-gradient(#9ac138, #83a342);
  background:-ms-linear-gradient(#9ac138, #83a342);
  background:-o-linear-gradient(#9ac138, #83a342);
  background:linear-gradient(#9ac138, #83a342);
  color:#fff;
  border:1px solid #5d742c;
  text-shadow:0 1px 1px #000;
}

.start-over-button {
  background:#c85230;
  background:-webkit-linear-gradient(#f56534, #c85230);
  background:-moz-linear-gradient(#f56534, #c85230);
  background:-ms-linear-gradient(#f56534, #c85230);
  background:-o-linear-gradient(#f56534, #c85230);
  background:linear-gradient(#f56534, #c85230);
  border:1px solid #8f361f;
  text-shadow:0 1px 1px #000;
  color:#fff;
  width:100px;
}

.question {
  font-size:22px;
  line-height:25px;
  position:relative;
  margin:87px 30px 0;
  font-family:'georgia', serif;
}

.question ul{
  margin:26px 0 0 35px;
}

.question li{
  margin-bottom:24px;
  font-size:20px;
  line-height:25px;
}

@media screen and (max-width: 320px) {


  #wrap {
    width:320px;
    height:480px;
  }

  #content{
    width:320px;
    height:480px;
  }

  #actions {
    min-height:480px;
    width:320px;
    left:320px;
    overflow-y:scroll;
    overflow-x:hidden;
  }
}

@media screen and (min-width: 768px) {
  #content .question{
    font-size:39px;
    margin:93px auto 0;
    width:500px;
    line-height:52px;
  }

  .question ul{
    margin-top:18px;
  }

  #actions{
    font-size:18px;

  }

  #actions ol{
    margin-left:55px;
  }

  .bookmark{
    margin-left:55px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  #content{
    background:#fff url(images/linedpaper_2x.png) left top repeat;
    background-size: 412px 300px;
  }

  #controls{
    background:#fff url(images/gray_jean_2x.png) left top repeat;
    background-size: 150px 150px;
  }
}
